<template>
	<view class="ayi-page tab-page">
		<view class="my-header" :style="style">
			<view class="my-header-avatar">
				<image v-show="isAvatar" class="img-img" mode="aspectFit" :src="avatarImg"></image>
				<image v-show="!isAvatar" class="img-img" mode="aspectFit" src="/static/icon/avatar.png"></image>
			</view>
			<view class="my-header-contain">
				<view class="m-h-c">{{ nickName }}</view>
				<view class="m-h-c" @click="refreshMoney()">
					余额:{{ money }}
					<i class="iconfont" style="font-size: 28rpx;margin-left:10px;">&#xe68d;</i>
				</view>
			</view>
			<view @click="loginOut()" class="my-header-i"><i class="iconfont" style="color:#ffffff;font-size: 40rpx;">&#xe63c;</i></view>
		</view>
		<view class="my-service">
			<view class="my-s-s">
				<view class="my-s-s-1" @click="onLink('link', linkObj.online)">
					<i class="iconfont" style="color:#7fbbeb;font-size: 120rpx;">&#xe611;</i>
					<span>在线客服</span>
				</view>
				<view class="my-s-s-2" @click="onLink('qqewm', linkObj.qqimage)">
					<i class="iconfont" style="color:#5ebeff;font-size: 120rpx;">&#xe605;</i>
					<span>QQ客服</span>
				</view>
				<view class="my-s-s-3" @click="onLink('wxewm', linkObj.wximage)">
					<i class="iconfont" style="color:#9adca3;font-size: 120rpx;">&#xe60a;</i>
					<span>微信客服</span>
				</view>
			</view>
		</view>
		<view class="my-list">
			<view class="my-item" @click="gotoPage('/pages/my/wallet/wallet')">
				<view class="my-item-i icon-left"><i class="iconfont" style="color:#54d4b6;">&#xe613;</i></view>
				<view class="my-item-i content">
					<span class="i-title">我的钱包</span>
					<!-- <span style="position: absolute;right: 0px;font-size: 24rpx;color: #f66;top: 20rpx;">查看交易明细</span> -->
				</view>
				<view class="my-item-i icon-right"><i class="iconfont" style="color: #c0c0c0; font-size: 48rpx;">&#xe61b;</i></view>
			</view>
			<view v-if="menu.grzx == 1" class="my-item" @click="gotoPage('/pages/my/personalcenter/personalcenter')">
				<view class="my-item-i icon-left"><i class="iconfont" style="color:#80c5ee;">&#xe60b;</i></view>
				<view class="my-item-i content"><span class="i-title">个人中心</span></view>
				<view class="my-item-i icon-right"><i class="iconfont" style="color: #c0c0c0; font-size: 48rpx;">&#xe61b;</i></view>
			</view>
			<view v-if="menu.jmhz == 1" class="my-item" @click="gotoPage('/pages/my/join/join')">
				<view class="my-item-i icon-left"><i class="iconfont" style="color:#38dfe0;">&#xe614;</i></view>
				<view class="my-item-i content"><span class="i-title">加盟合作</span></view>
				<view class="my-item-i icon-right"><i class="iconfont" style="color: #c0c0c0; font-size: 48rpx;">&#xe61b;</i></view>
			</view>
			<view v-if="menu.yhhd == 1" class="my-item" @click="gotoPage('/pages/my/promotion/promotion')">
				<view class="my-item-i icon-left"><i class="iconfont" style="color:#fd905f;">&#xe60d;</i></view>
				<view class="my-item-i content"><span class="i-title">优惠送不停</span></view>
				<view class="my-item-i icon-right"><i class="iconfont" style="color: #c0c0c0; font-size: 48rpx;">&#xe61b;</i></view>
			</view>
			<view v-if="menu.kjw == 1" class="my-item" @click="onLotNetPage()">
				<view class="my-item-i icon-left"><i class="iconfont" style="color:#58dfaa;">&#xe610;</i></view>
				<view class="my-item-i content"><span class="i-title">全国开奖网</span></view>
				<view class="my-item-i icon-right"><i class="iconfont" style="color: #c0c0c0; font-size: 48rpx;">&#xe61b;</i></view>
			</view>
			<view v-if="menu.tjApp == 1" class="my-item" @click="gotoPage('/pages/my/recommendapp/recommendapp')">
				<view class="my-item-i icon-left"><i class="iconfont" style="color:#29b6ff;">&#xe607;</i></view>
				<view class="my-item-i content"><span class="i-title">分享APP</span></view>
				<view class="my-item-i icon-right"><i class="iconfont" style="color: #c0c0c0; font-size: 48rpx;">&#xe61b;</i></view>
			</view>
			<view v-if="menu.gz == 1" class="my-item" @click="gotoPage('/pages/my/rule/rule')">
				<view class="my-item-i icon-left"><i class="iconfont" style="color:#80c5ee;">&#xe60e;</i></view>
				<view class="my-item-i content"><span class="i-title">规则</span></view>
				<view class="my-item-i icon-right"><i class="iconfont" style="color: #c0c0c0; font-size: 48rpx;">&#xe61b;</i></view>
			</view>
			<view v-if="menu.cjwt == 1" class="my-item" @click="gotoPage('/pages/my/conpro/conpro')">
				<view class="my-item-i icon-left"><i class="iconfont" style="color:#f4ea2a;">&#xe606;</i></view>
				<view class="my-item-i content"><span class="i-title">常见问题</span></view>
				<view class="my-item-i icon-right"><i class="iconfont" style="color: #c0c0c0; font-size: 48rpx;">&#xe61b;</i></view>
			</view>
			<view class="my-item">
				<view class="my-item-i icon-left"><image class="img-img" style="width:56rpx;height:56rpx;" mode="aspectFit" src="/static/icon/down_icon.png"></image></view>
				<view class="my-item-i content"><span class="i-title">检查更新</span></view>
				<view class="my-item-i icon-right"><i class="iconfont" style="color: #c0c0c0; font-size: 48rpx;">&#xe61b;</i></view>
			</view>
		</view>

		<view class="mark-contain" @click="hideWin()" v-if="showWin">
			<view class="img-div">
				<image class="img-img-kf" mode="aspectFit" :src="linkObj.wximage" v-if="ewmStyleStr == 'wxewm'"></image>
				<image class="img-img-kf" mode="aspectFit" :src="linkObj.qqimage" v-if="ewmStyleStr == 'qqewm'"></image>
			</view>
		</view>
	</view>
</template>

<script>
import { Tools, Config, URL, Net, VueTools } from '@/common/tools.js';
import Tabbar from '@/components/tabbar.vue';
export default {
	components: {
		Tabbar
	},
	data() {
		return {
			menu: { yhhd: 0, jmhz: 0, tjApp: 0, cjwt: 0, kjw: 0, gz: 0, grzx: 0 },
			linkObj: { online: '', qq: '', wximage: '', lotUrl: '', qqimage: '' },
			money: 0,
			showWin: false,
			ewmStyleStr: '', //二维码类型
			avatarImg: '', //用户的头像
			isAvatar: false, //用户的头像
			nickName: '', //昵称
			isCordova: false, //是否是真机
			fast: true
		};
	},
	computed: {
		style() {
			let _style = `padding-top: ${this.statusBar + 20}px;`;
			return _style;
		}
	},
	onLoad() {
		this.menuNet();
		this.joinNet();
		this.userInfo();
		this.getMoney();
	},
	onShow() {},
	methods: {
		gotoPage(str) {
			this.navigateToSigleUrl(str);
		},
		loginOut() {
			VueTools.clearStorageSync();
			uni.navigateTo({
				url: '/pages/my/login/login'
			});
		},
		/**
		 * 刷新获取
		 */
		refreshMoney() {
			let that = this;
			Net.ayiHttp(
				URL.USER_FINDCREDIT,
				'{}',
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						let data = Tools.aesDecodeToJson(res.data);
						console.log('刷新获取余额数据', data);
						that.money = Tools.keepTwoDecimal(data.credit2);
						VueTools.setStorageSync(Config.MONEY_KEY, data);
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
				},
				function(err) {
					console.log('error:', err);
				}
			);
		},
		/**
		 * 入口item是否被屏闭处理
		 */
		menuNet() {
			let that = this;
			Net.ayiHttp(
				URL.USER_MENU_MENU,
				'{}',
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						let data = Tools.aesDecodeToJson(res.data);
						that.menu = data;
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
				},
				function(err) {
					console.log('error:', err);
				}
			);
		},
		/**
		 * 获取客服的的数据
		 */
		joinNet() {
			let that = this;
			let linkData = VueTools.getStorageSync('linkmethod');
			if (!Tools.isEmpty(linkData)) {
				that.linkObj = linkData;
				return;
			}
			Net.ayiHttp(
				URL.OTHER_CONFIG,
				'{"type":"join"}',
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						let data = Tools.aesDecodeToJson(res.data);
						that.linkObj = {
							online: data.online.cfg_val,
							qq: data.qq.cfg_val,
							wximage: data.wximage.cfg_val,
							lotUrl: data.lotteryweb.cfg_val,
							qqimage: data.qqimage.cfg_val
						};
						VueTools.setStorageSync('linkmethod', that.linkObj);
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
				},
				function(err) {
					console.log('error:', err);
				}
			);
		},
		/**
		 * 从缓存中获取用户名和存储的余额值
		 */
		userInfo() {
			let that = this;
			let tempUserInfo = VueTools.getStorageSync(Config.USERINFO_KEY);
			if (!Tools.isEmpty(tempUserInfo)) {
				let userInfo = tempUserInfo;
				that.nickName = userInfo.uinfo.username;
				that.avatarImg = userInfo.uinfo.images;
				if (Tools.isEmpty(that.avatarImg)) {
					that.isAvatar = false;
				} else {
					that.$store.commit('isTestPlay');
					if (that.$store.state.isTestPlay) {
						that.isAvatar = false;
					} else {
						that.isAvatar = true;
					}
				}
			}
		},
		getMoney() {
			let tempMoney = VueTools.getStorageSync(Config.MONEY_KEY);
			if (!Tools.isEmpty(tempMoney)) {
				this.money = Tools.keepTwoDecimal(tempMoney.credit2);
				return;
			}
			this.refreshMoney();
		},
		/**
		 * 关闭微信或者QQ的弹出二维码层
		 */
		hideWin() {
			this.showWin = false;
		},
		/**
		 * 客服系统
		 */
		onLink(type, val) {
			if (type == 'link') {
				if (Tools.isEmpty(val)) {
					VueTools.toastNo('暂无客服联系方式');
					return;
				} else {
					//跳转到外部链接
				}
			} else {
				if (Tools.isEmpty(val)) {
					VueTools.toastNo('暂无客服联系方式');
					return;
				}
				this.ewmStyleStr = type + '';
				this.showWin = true;
			}
		},
		/**
		 * 开奖网跳转
		 */
		onLotNetPage() {
			if (Tools.isEmpty(this.linkObj.lotUrl)) {
				VueTools.toastNo('暂无提供');
				return;
			} else {
				// const browser = this.iab.create(this.linkObj.lotUrl, '_system');
			}
		}
	},
	onTabItemTap(option) {
		if (this.$store.state.tabbar_now_index != 4 || this.$store.state.tabbar_now_index != '4') {
			// #ifdef APP-PLUS
			this.Tab.getInstance().show();
			// #endif
			this.$store.commit('setTabbarIndex', option.index);
			uni.$emit('clearMenuTimer');
			uni.$emit('isClearTimeOut', { isClear: true });
			let isLogin = VueTools.getStorageSync(Config.IS_LOGIN_STORE_KEY);
			if (!Tools.isEmpty(isLogin) && (isLogin == '1' || isLogin == 1)) {
				console.log('需要去登陆my');
				return;
			}
		}
	}
};
</script>

<style lang="scss">
.my-header {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	background: linear-gradient(to right, #ff6163, #e9385d);
	padding: 20px 16px 0px;
	height: 160rpx;
	.my-header-avatar {
		.img-img {
			width: 72rpx;
			height: 72rpx;
			border-radius: 72rpx;
			border: 1px solid #fff;
		}
	}
	.my-header-contain {
		padding-left: 20rpx;
		.m-h-c {
			font-size: 28rpx;
			color: #ffffff;
		}
	}
	.my-header-i {
		position: absolute;
		right: 20px;
	}
}
.my-service {
	margin-top: -60rpx;
	margin-bottom: 20rpx;
}
.my-service {
	padding: 0rpx 16rpx;
}
.my-service .my-s-s {
	border-radius: 10px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	background: #fff;
	display: flex;
	padding: 20rpx 0rpx;
	.my-s-s-1,
	.my-s-s-2,
	.my-s-s-3 {
		flex: 1;
		text-align: center;
		span {
			display: block;
			color: #545454;
			font-size: 28rpx;
			margin-top: 20rpx;
		}
	}
}
// 列表的样式
.my-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0rpx 16rpx;
	border-bottom: 1px solid #e8e9ec;
	.my-item-i {
		display: block;
		position: relative;
		padding: 16rpx 0rpx;
	}
	.icon-left {
		flex: 3;
		text-align: center;
		.iconfont {
			font-size: 48rpx;
		}
	}
	.content {
		flex: 14;
		span.i-title {
			color: #000000;
			font-size: 34rpx;
		}
	}
	.icon-right {
		flex: 1;
	}
}

//微信或者QQ的弹出层
.mark-contain {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	z-index: 10000;
	background: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100%;
	.img-div {
		height: 600rpx;
		width: 600rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		position: absolute;
		left: 50%;
		margin-left: -320rpx;
		top: 50%;
		margin-top: -300rpx;
		.img-img-kf {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
